<script setup lang="ts">
import { ref } from 'vue'
const mockData = ref([
  {
    id: '1',
    dh: '1(1)',
    children: [
      {
        title: '标题1',
        content: '内容1',
      },
      {
        title: '标题2',
        content: '内容2',
      },
      {
        title: '标题3',
        content: '内容3',
      },
      {
        title: '标题4',
        content: '内容4',
      },
    ],
  },
  {
    id: '2',
    dh: '2(2)',
    children: [
      {
        title: '标题1',
        content: '内容1',
      },
      {
        title: '标题2',
        content: '内容2',
      },
      {
        title: '标题3',
        content: '内容3',
      },
      {
        title: '标题4',
        content: '内容4',
      },
    ],
  },
  {
    id: '3',
    dh: '3(3)',
    children: [
      {
        title: '标题1',
        content: '内容1',
      },
      {
        title: '标题2',
        content: '内容2',
      },
      {
        title: '标题3',
        content: '内容3',
      },
      {
        title: '标题4',
        content: '内容4',
      },
    ],
  },
  {
    id: '4',
    dh: '4(4)',
    children: [
      {
        title: '标题1',
        content: '内容1',
      },
      {
        title: '标题2',
        content: '内容2',
      },
      {
        title: '标题3',
        content: '内容3',
      },
      {
        title: '标题4',
        content: '内容4',
      },
    ],
  },
])
const activeNames = ref<string[]>(mockData.value.map((el) => el.id))
const collapseAll = (flag: boolean) => {
  if (flag) {
    activeNames.value = mockData.value.map((el) => el.id)
  } else {
    activeNames.value = []
  }
}
</script>

<template>
  <div class="qwjs">
    <div class="filter">
      <el-input placeholder="请输入搜索关键字，多个关键字以空格隔开"> </el-input>
      <el-button type="primary">搜索</el-button>
    </div>
    <div class="result">
      <div class="action">
        <el-button type="primary" plain icon="ArrowDown" @click="collapseAll(true)"
          >展开全部</el-button
        >
        <el-button type="primary" plain icon="ArrowUp" @click="collapseAll(false)"
          >折叠全部</el-button
        >
      </div>
      <el-collapse v-model="activeNames">
        <el-collapse-item v-for="item in mockData" :key="item.id" :title="item.dh" :name="item.id">
          <div class="da-item" v-for="da in item.children" :key="da.title">
            <el-link type="primary" icon="Document" :underline="false">{{ da.title }}</el-link>
            <span class="txt-ellipsis">{{ da.content }}</span>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<style scoped lang="scss">
.qwjs {
  margin: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .filter {
    display: flex;
    justify-content: center;
    width: 60%;
    padding-bottom: 16px;
  }
  .result {
    width: 100%;
    border-top: 1px solid #dae4f1;
    padding-top: 16px;
    .action {
      margin-bottom: 16px;
    }
    :deep(.el-collapse-item) {
      .el-collapse-item__header {
        background-color: #ecf1fa;
        position: relative;
        padding-left: 48px;
        font-size: 16px;
        font-weight: 600;
        color: #409eff;
        .el-collapse-item__arrow {
          position: absolute;
          left: 12px;
        }
      }
      .da-item {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        height: 40px;
        border-bottom: 1px solid #dae4f1;
        padding-left: 48px;
        .txt-ellipsis {
          padding-left: 12px;
        }
      }
    }
  }
}
</style>
